<template>
	<view class="dish-card">
		<uni-swipe-action>
			<uni-swipe-action-item
				:disabled="!swipe"
				:threshold="0"
				:right-options="options"
				@click="bindClick"
			>
				<view class="dish-card-warpper bg-default">
					<!-- 左侧图片 -->
					<image
						class="dish-image"
						:src="image"
						mode="aspectFill"
					/>
					<!-- 右侧 -->
					<view class="right">
						<button
							v-if="showCommentButton"
							class="comment-btn"
							type="primary"
							plain="true"
							size="mini"
							@click="navigateToCommentsPage"
						>
							我要点评
						</button>
						<view class="dish-name">{{ name }}</view>
						<view class="dish-type">{{ type }}</view>
						<view class="dish-score">
							<uni-rate
								:value="score"
								:size="18"
								allowHalf
								readonly
							/>
							<view class="dish-score-rating">{{ score }}</view>
							<view class="dish-score-count">{{ count }}次</view>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
import { computed } from 'vue';
import { deleteDishById } from '../../apis/dish.js';

export default {
	name: 'DishCard',
	props: {
		dishId: { type: Number, default: 0 },
		name: { type: String, default: '红烧肉' },
		type: { type: String, default: '大荤' },
		score: { type: Number, default: 0 },
		count: { type: Number, default: 0 },
		image: { type: String, default: '../../static/icons/no-image.svg' },
		// 可滑动编辑
		swipe: { type: Boolean, default: false },
		// 显示删除
		swipeDelete: { type: Boolean, default: false },
		// 显示编辑
		// swipeEdit: { type: Boolean, default: false },
		// 显示我要点评按钮
		showCommentButton: { type: Boolean, default: false },
	},
	data() {
		return {
			options: [
				{
					text: '删除',
					style: { backgroundColor: '#F56C6C' },
				},
				{
					text: '修改',
					style: { backgroundColor: '#007aff' },
				},
			],
		};
	},
	computed: {
		// options() {
		// 	const opt = [];
		// 	if (this.swipeEdit) {
		// 		opt.push({
		// 			text: '修改',
		// 			style: { backgroundColor: '#007aff' },
		// 		});
		// 	}
		// 	if (this.swipeDelete) {
		// 		opt.push({
		// 			text: '删除',
		// 			style: { backgroundColor: '#F56C6C' },
		// 		});
		// 	}
		// },
	},
	methods: {
		bindClick({ index }) {
			// ["删除","修改"]
			// console.log(position, index);

			if (index === 0) {
				this.deleteDishAndConfirm();
			} else {
				this.updateDish();
			}
		},

		deleteDishAndConfirm() {
			// console.log('删除菜品', this.dishId);
			const that = this;
			uni.showModal({
				title: '提示',
				content: '确定要删除吗',
				success(res) {
					if (res.confirm) {
						console.log('确定');
						that.deleteDish();
					} else if (res.cancel) {
						console.log('取消');
					}
				},
			});
		},
		deleteDish() {
			uni.showLoading({
				title: '',
				mask: false,
			});
			deleteDishById(this.dishId)
				.then((res) => {
					// console.log('shachu ', res);
					// uni.navigateBack();
					setTimeout(() => {
						this.$emit('deleted');
					}, 500);
				})
				.finally(() => {
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				});
		},
		updateDish() {
			// console.log('修改菜品');
			uni.navigateTo({
				url: '/pages/create-dish/create-dish?dishId=' + this.dishId,
			});
		},

		navigateToCommentsPage() {
			uni.navigateTo({
				url: '../../pages/comments/comments?dishId=' + this.dishId,
			});
		},
	},
};
</script>

<style scoped>
.dish-card {
	padding: 0 12rpx 12rpx 12rpx;
}
.dish-card-warpper {
	display: flex;
}
.dish-image {
	width: 180rpx;
	height: 180rpx;
}

.right {
	position: relative;
	flex: 1;
	padding: 16rpx 16px 0 24rpx;
}
.comment-btn {
	position: absolute;
	top: 16rpx;
	right: 16rpx;

	width: 120rpx;
	height: 56rpx;
	padding: 0;

	font-size: 12px;
}
.dish-name {
	color: #000;
}
.dish-type {
	margin-top: 12rpx;
	color: #6d6d6d;
}
.dish-score {
	margin-top: 16rpx;
	display: flex;
	align-items: center;
}
.dish-score-rating {
	color: #fac909;
	font-weight: bold;
	width: 66rpx;
	margin-left: 16rpx;
}
.dish-score-count {
	color: #363636;
}
</style>
